<template>
	<div class="footer">
		<van-tabbar v-model="active">
			<van-tabbar-item icon="home-o" @click="goto('/home')"
				>首页</van-tabbar-item
			>
			<van-tabbar-item icon="star-o" @click="goto('/classification')"
				>分类</van-tabbar-item
			>
			<van-tabbar-item icon="shopping-cart-o" @click="goto('/car')"
				>购物车</van-tabbar-item
			>
			<van-tabbar-item
				icon="smile-o"
				@click="goto('/personal')"
				v-if="isLogin"
				>我的</van-tabbar-item
			>
			<van-tabbar-item icon="friends-o" @click="goto('/login')" v-else
				>登录</van-tabbar-item
			>
		</van-tabbar>
	</div>
</template>
<script setup>
import { ref } from "vue"
import { Col, Row } from "vant"
import { useRouter } from "vue-router"

import { checkLogin } from "../services/index"

const router = useRouter()

const goto = (path) => {
	router.push(path)
}

const active = ref(0)

const isLogin = checkLogin()
</script>
<style>
.footer {
	text-align: center;
	line-height: 50px;
	width: 100%;
	height: 50px;
	background-color: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
}
</style>
